<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>批次状态修复测试</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    .test-case {
      border: 1px solid #ddd;
      margin: 10px 0;
      padding: 15px;
      border-radius: 5px;
    }

    .test-case h3 {
      margin-top: 0;
      color: #333;
    }

    .before,
    .after {
      background: #f5f5f5;
      padding: 10px;
      margin: 10px 0;
      border-radius: 3px;
    }

    .before h4,
    .after h4 {
      margin-top: 0;
      color: #666;
    }

    .status-new {
      color: #28a745;
    }

    .status-importing {
      color: #ffc107;
    }

    .status-completed {
      color: #007bff;
    }

    .status-stopped {
      color: #dc3545;
    }

    .result {
      font-weight: bold;
      padding: 5px 10px;
      border-radius: 3px;
      margin: 10px 0;
    }

    .result.pass {
      background: #d4edda;
      color: #155724;
    }

    .result.fail {
      background: #f8d7da;
      color: #721c24;
    }
  </style>
</head>

<body>
  <h1>批次状态修复测试</h1>
  <p>这个页面用于测试批次状态修复逻辑是否正确工作。</p>

  <div id="test-results"></div>

  <script>
    // 复制修复逻辑到测试页面
    function fixBatchStatusInconsistency(batch) {
      if (!batch) return batch

      const fixedBatch = { ...batch }

      // 修复导入完成但importStatus不是completed的情况
      if (batch.status === 'import_completed' && batch.importStatus !== 'completed') {
        fixedBatch.importStatus = 'completed'
        fixedBatch.importProgress = 100
        console.warn(`修复批次 ${batch.id} 状态不一致: status=import_completed 但 importStatus=${batch.importStatus}`)
      }

      // 修复导入中但status不是importing的情况
      if (batch.importStatus === 'importing' && batch.status !== 'importing') {
        fixedBatch.status = 'importing'
        console.warn(`修复批次 ${batch.id} 状态不一致: importStatus=importing 但 status=${batch.status}`)
      }

      // 修复导入停止但status不是import_stopped的情况
      if (batch.importStatus === 'stopped' && batch.status !== 'import_stopped') {
        fixedBatch.status = 'import_stopped'
        console.warn(`修复批次 ${batch.id} 状态不一致: importStatus=stopped 但 status=${batch.status}`)
      }

      return fixedBatch
    }

    // 测试用例
    const testCases = [
      {
        name: "测试用例1: 导入完成但importStatus不是completed",
        description: "测试导入完成状态的一致性",
        before: {
          id: "6",
          name: "BrandA-2025SS",
          brand: "BrandA",
          season: "2025SS",
          status: "import_completed",
          importTime: "2025-08-10 14:22",
          importProgress: 100,
          importStatus: "importing",
          matchingProgress: 0,
          vectorProgress: 0,
          totalInfo: 156,
          totalImages: 142,
          identifiedStyles: 23,
          identifiedColors: 89,
          anomalies: {
            naming: 12,
            emptyImage: 6,
            emptyInfo: 3,
            imageOnly: 8
          }
        },
        expected: {
          status: "import_completed",
          importStatus: "completed"
        }
      },
      {
        name: "测试用例2: 导入中但status不是importing",
        description: "测试导入中状态的一致性",
        before: {
          id: "7",
          name: "BrandB-2025FW",
          brand: "BrandB",
          season: "2025FW",
          status: "new",
          importTime: null,
          importProgress: 45,
          importStatus: "importing",
          matchingProgress: 0,
          vectorProgress: 0,
          totalInfo: 0,
          totalImages: 0,
          identifiedStyles: 0,
          identifiedColors: 0,
          anomalies: {
            naming: 0,
            emptyImage: 0,
            emptyInfo: 0,
            imageOnly: 0
          }
        },
        expected: {
          status: "importing",
          importStatus: "importing"
        }
      },
      {
        name: "测试用例3: 导入停止但status不是import_stopped",
        description: "测试导入停止状态的一致性",
        before: {
          id: "8",
          name: "BrandC-2025SS",
          brand: "BrandC",
          season: "2025SS",
          status: "new",
          importTime: null,
          importProgress: 30,
          importStatus: "stopped",
          matchingProgress: 0,
          vectorProgress: 0,
          totalInfo: 0,
          totalImages: 0,
          identifiedStyles: 0,
          identifiedColors: 0,
          anomalies: {
            naming: 0,
            emptyImage: 0,
            emptyInfo: 0,
            imageOnly: 0
          }
        },
        expected: {
          status: "import_stopped",
          importStatus: "stopped"
        }
      }
    ];

    // 运行测试
    function runTests() {
      const resultsContainer = document.getElementById('test-results');

      testCases.forEach((testCase, index) => {
        const fixed = fixBatchStatusInconsistency(testCase.before);
        const passed = fixed.status === testCase.expected.status &&
          fixed.importStatus === testCase.expected.importStatus;

        const testDiv = document.createElement('div');
        testDiv.className = 'test-case';

        testDiv.innerHTML = `
                    <h3>${testCase.name}</h3>
                    <p>${testCase.description}</p>

                    <div class="before">
                        <h4>修复前:</h4>
                        <p><strong>status:</strong> <span class="status-${testCase.before.status}">${testCase.before.status}</span></p>
                        <p><strong>importStatus:</strong> <span class="status-${testCase.before.importStatus}">${testCase.before.importStatus}</span></p>
                    </div>

                    <div class="after">
                        <h4>修复后:</h4>
                        <p><strong>status:</strong> <span class="status-${fixed.status}">${fixed.status}</span></p>
                        <p><strong>importStatus:</strong> <span class="status-${fixed.importStatus}">${fixed.importStatus}</span></p>
                    </div>

                    <div class="result ${passed ? 'pass' : 'fail'}">
                        ${passed ? '✅ 测试通过' : '❌ 测试失败'}
                    </div>
                `;

        resultsContainer.appendChild(testDiv);
      });
    }

    // 页面加载完成后运行测试
    document.addEventListener('DOMContentLoaded', runTests);
  </script>
</body>

</html>
